// Variables are automatically imported via vite.config.ts

// 全局样式重置
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: $font-size-base;
  color: $text-primary;
  background-color: $bg-color;
}

#app {
  height: 100%;
}

// 管理后台布局样式
.admin-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .layout-header {
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 $spacing-lg;

    .header-left {
      display: flex;
      align-items: center;

      .logo {
        font-size: $font-size-large;
        font-weight: $font-weight-primary;
        color: $primary-color;
        margin-right: $spacing-lg;
      }

      .menu-toggle {
        margin-right: $spacing-md;
        cursor: pointer;
      }
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: $spacing-md;
    }
  }

  .layout-container {
    flex: 1;
    display: flex;
    overflow: hidden;

    .layout-sidebar {
      width: 240px;
      background: #001529;
      transition: width 0.3s;

      &.collapsed {
        width: 64px;
      }

      .el-menu {
        border-right: none;
      }
    }

    .layout-main {
      flex: 1;
      background: $bg-color;
      overflow: auto;
      padding: $spacing-lg;
    }
  }
}

// 页面容器样式
.page-container {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $spacing-lg;
    padding: $spacing-md $spacing-lg;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);

    .page-title {
      font-size: $font-size-large;
      font-weight: $font-weight-primary;
      color: $text-primary;
    }
  }

  .page-content {
    background: #fff;
    border-radius: 4px;
    padding: $spacing-lg;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
  }
}

// 搜索表单样式
.search-form {
  background: #fff;
  padding: $spacing-lg;
  border-radius: 4px;
  margin-bottom: $spacing-lg;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);

  .el-form-item {
    margin-bottom: $spacing-md;
  }
}

// 数据表格样式
.data-table {
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $spacing-md;

    .table-title {
      font-size: $font-size-medium;
      font-weight: $font-weight-primary;
    }

    .table-actions {
      display: flex;
      gap: $spacing-sm;
    }
  }

  .el-table {
    margin-bottom: $spacing-lg;
  }

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}

// 统计卡片样式
.stat-card {
  .stat-content {
    display: flex;
    align-items: center;
    padding: $spacing-lg;

    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: $spacing-md;
      font-size: 24px;
      color: #fff;

      &.primary {
        background: $primary-color;
      }

      &.success {
        background: $success-color;
      }

      &.warning {
        background: $warning-color;
      }

      &.danger {
        background: $danger-color;
      }
    }

    .stat-info {
      flex: 1;

      .stat-value {
        font-size: $font-size-extra-large;
        font-weight: $font-weight-primary;
        color: $text-primary;
        margin-bottom: $spacing-xs;
      }

      .stat-label {
        font-size: $font-size-small;
        color: $text-secondary;
      }
    }

    .stat-trend {
      display: flex;
      align-items: center;
      font-size: $font-size-small;

      &.up {
        color: $success-color;
      }

      &.down {
        color: $danger-color;
      }
    }
  }
}

// 质检处理组件样式
.quality-handler {
  .exception-detail {
    margin-bottom: $spacing-lg;

    .exception-info {
      .basic-info {
        margin-bottom: $spacing-md;

        .label {
          font-weight: $font-weight-primary;
          margin-right: $spacing-sm;
        }
      }

      .comparison {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: $spacing-lg;
        margin-bottom: $spacing-lg;

        .original, .actual {
          padding: $spacing-md;
          border: 1px solid $border-light;
          border-radius: 4px;

          h4 {
            margin-bottom: $spacing-sm;
            color: $text-primary;
          }

          p {
            margin-bottom: $spacing-xs;
            color: $text-regular;
          }
        }

        .original {
          background-color: #fef0f0;
        }

        .actual {
          background-color: #f0f9ff;
        }
      }
    }

    .handler-actions {
      .el-radio-group {
        margin-bottom: $spacing-md;
      }

      .el-input-number {
        margin-bottom: $spacing-md;
        width: 200px;
      }

      .el-textarea {
        margin-bottom: $spacing-md;
      }

      .action-buttons {
        display: flex;
        gap: $spacing-sm;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .admin-layout {
    .layout-container {
      .layout-sidebar {
        position: fixed;
        left: -240px;
        top: 60px;
        height: calc(100vh - 60px);
        z-index: 999;
        transition: left 0.3s;

        &.mobile-open {
          left: 0;
        }
      }

      .layout-main {
        margin-left: 0;
      }
    }
  }

  .page-container {
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: $spacing-sm;
    }
  }

  .search-form {
    .el-form-item {
      width: 100%;
    }
  }

  .quality-handler {
    .exception-detail {
      .exception-info {
        .comparison {
          grid-template-columns: 1fr;
        }
      }
    }
  }
}